<template>
  <div class="my_screen_page">
    <my-header title="自治区市场监管局" />
    <div class="mt20 pl20 pr20 df jcsb">

      <!-- 左边 -->
      <div class="w760">
        <div class="area_block_1_1">
          <div>
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">新登记经营主题情况</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_1_1">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 4" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="mt40">
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">经营主体规模结构</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_1_2">
              <ul class="jian_list_box">
                <li class="item_jian_box" v-for="(item, index) in 3" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">注册资本在100亿元以上的经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">62</span><span class="ml5 fz14 cor_777">户</span></div>
                    <div class="w120 cor_00F text_font_DIN fz24">8.62%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">987</span><span class="ml5 fz14 cor_777">户</span></div>
                    <div class="w120 cor_00F text_font_DIN fz24">2.49%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 中边 -->
      <div class="w960">
        <div class="area_block_1_2">
          <div>
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">经营主体总体情况</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_1_5">
              <ul class="jian_list_box_3">
                <li class="item_jian_box_3" v-for="(item, index) in 3" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">注册资本在100亿元以上的经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">62</span><span class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="ml10 w120 cor_00F text_font_DIN fz24">8.62%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <li class="item_jian_box_3">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">987</span><span class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="ml10 w120 cor_00F text_font_DIN fz24">2.49%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="mt20">
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">农林牧渔业经营主体户数</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="chart_line_box">
              <chart-bar-or-line-one :chartData="lineData1"></chart-bar-or-line-one>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="w760">
        <div class="area_block_1_3">

          <div>
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">经营主体重点行业分布情况</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_1_3">
              <ul class="jian_list_box_2">
                <li class="item_jian_box_2" v-for="(item, index) in 7" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">注册资本在100亿元以上的经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">62</span><span class="ml5 fz14 cor_777">户</span></div>
                    <div class="w120 cor_00F text_font_DIN fz24">8.62%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <li class="item_jian_box_2">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">987</span><span class="ml5 fz14 cor_777">户</span></div>
                    <div class="w120 cor_00F text_font_DIN fz24">2.49%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <div class="mt40">
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">失信经营主体信息</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_1_4">
              <ul class="jian_list_box_2">
                <li class="item_jian_box_2" v-for="(item, index) in 3" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">注册资本在100亿元以上的经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">62</span><span class="ml5 fz14 cor_777">户</span></div>
                    <div class="w120 cor_00F text_font_DIN fz24">8.62%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import MyHeader from '../components/my-header.vue';
import chartLineOne from '@/components/chartLineOne.vue';
import chartBarOrLineOne from '@/components/chartBarOrLineOne.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

const lineData4 = reactive({
  names: ['耗能'],
  datas: [[65, 126, 57, 110, 129, 150, 91, 152]],
  dataX: [1,2,3,4,5,6,7,8],
  cell: '耗能',
  colorList: ['rgba(0, 240, 247, 1)']
});

const lineData1 = reactive({
  datas:[
    [2,6,4,7,2,5,8],
    [5,6,4,7,2,4,6]
  ],
  dataX: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
})

</script>

<style lang="scss" scoped>

.my_screen_page {
  .scroll_box_1_1 {
    position: relative;
    height: 708px;
    overflow: hidden;
    margin-top: 24px;
  }
  .scroll_box_1_2 {
    position: relative;
    height: 564px;
    overflow: hidden;
    margin-top: 24px;
  }
  .scroll_box_1_5 {
    position: relative;
    height: 552px;
    overflow: hidden;
    margin-top: 16px;
  }
  .area_block_1_1 {
    position: relative;
    padding: 40px 30px 0;
    width: 100%;
    height: 1486px;
    background: url(@/assets/images/dataCenter/area_1_1.png) no-repeat;
    background-size: 100%;
    .jian_list_box {
      position: relative;
      .item_jian_box {
        position: relative;
        padding: 0 16px;
        height: 132px;
        color: #fff;
        font-size: 16px;
        background: rgba(2,20,37,0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
        border-radius: 8px;
        margin-bottom: 12px;
        .chart_mini_size {
          position: relative;
          width: 200px;
          height: 100px;
        }
      }
    }
  }
  .area_block_1_2 {
    position: relative;
    padding: 40px 30px 0;
    width: 100%;
    height: 1486px;
    background: url(@/assets/images/dataCenter/area_1_2.png) no-repeat;
    background-size: 100%;
    .jian_list_box_3 {
      position: relative;
      .item_jian_box_3 {
        position: relative;
        padding: 0 16px;
        height: 132px;
        color: #fff;
        font-size: 16px;
        background: rgba(2,20,37,0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
        border-radius: 8px;
        margin-bottom: 8px;
        .chart_mini_size {
          position: relative;
          width: 400px;
          height: 100px;
        }
      }
    }
    .chart_line_box {
      position: relative;
      width: 100%;
      height: 760px;
    }
  }
  .area_block_1_3 {
    position: relative;
    padding: 40px 30px 0;
    width: 100%;
    height: 1486px;
    background: url(@/assets/images/dataCenter/area_1_1.png) no-repeat;
    background-size: 100%;
    .scroll_box_1_3 {
      position: relative;
      height: 888px;
      overflow: hidden;
      margin-top: 24px;
    }
    .scroll_box_1_4 {
      position: relative;
      height: 328px;
      overflow: hidden;
      margin-top: 24px;
    }
    .jian_list_box_2 {
      position: relative;
      .item_jian_box_2 {
        position: relative;
        padding: 0 16px;
        height: 104px;
        color: #fff;
        font-size: 16px;
        background: rgba(2,20,37,0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
        border-radius: 8px;
        margin-bottom: 8px;
        .chart_mini_size {
          position: relative;
          width: 200px;
          height: 72px;
        }
      }
    }
  }
}

</style>